<!--
 * @Author: Y先森
 * @Date: 2023-04-24 10:55:03
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-10 10:59:32
 * @FilePath: \y-website\src\views\design\components\navigation\pc\index.vue
-->
<template>
  <div
    class="bg-zinc-100 dark:bg-indigo-dark-m duration-500 sticky top-0 left-0 w-full z-10"
  >
    <ul
      class="w-[600px] text-zinc-900 relative flex flex-wrap overflow-x-auto  py-1 text-xs  duration-300 overflow-hidden"
      :class="[isOpenCategoty ? 'h-[206px]' : 'h-[56px]']"
    >
      <!-- lg 下展开箭头 -->
      <!-- <div
        class="absolute right-1 bottom-1 z-20 p-1 rounded cursor-pointer duration-200 hover:bg-zinc-50 dark:hover:bg-zinc-900"
        @click="triggerState"
      >
        <m-svg-icon
          :name="isOpenCategoty ? 'fold' : 'unfold'"
          class="w-1 h-1"
          fillClass="fill-zinc-900 dark:fill-zinc-300"
        ></m-svg-icon>
      </div> -->
      <!-- category item -->
      <li
        v-for="(item, index) in $store.getters.designCategorys"
        :key="item.id"
        class="shrink-0 text-zinc-400 px-1.5 py-0 z-10 duration-200 last:mr-4  dark:text-indigo-dark-l dark:hover:text-main text-base h-4 leading-4 cursor-pointer hover:bg-main hover:text-zinc-50 dark:hover:bg-zinc-50 rounded mr-1 mb-1"
        :class="{
          'text-zinc-50 dark:text-main bg-main dark:bg-zinc-50':
          $store.getters.currentDesignCategoryIndex === index
        }"
        @click="onItemClick(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

/**
 * 状态切换处理
 */
const isOpenCategoty = ref(false)
const triggerState = () => {
  isOpenCategoty.value = !isOpenCategoty.value
}

/**
 * 选中状态处理
 */
const onItemClick = (item) => {
  store.commit('app/currentDesignCategory', item)
}
</script>

<style lang="scss" scoped></style>
